<template>
	<view class="content">
		<nav-bar />
		<uni-transition mode-class="fade"
			:show="showAdd">
			<view class="index-ad">
				<text class="index-ad_icon iconfont icon-ad"></text>
				<view class="index-ad_text">
					点击右上角的关闭，可以关闭这是一大半文本这是一大半文本这是一大半文本这是一大半文本这是一大半文本这是一大半文本这是一大半文本
				</view>
				<text @click="handleClose"
					class="index-ad_close iconfont icon-close"></text>
			</view>
		</uni-transition>
		<swiper class="swiper-banner"
			v-if="sildeImages && sildeImages.length"
			autoplay
			indicator-dots
			circular>
			<swiper-item v-for="item in sildeImages"
				:key="item.id">
				<image :src="item.pic_image_url"
					mode="widthFix"
					show-menu-by-longpress></image>
			</swiper-item>
		</swiper>

		<view class="quick-enter"
			v-if="nav2s && nav2s.length">
			<block v-for="item in nav2s"
				:key="item.id">
				<image :src="item.pic_image_url"
					mode="widthFix"
					:data-index="item.id"
					:data-stype="item.stype"
					:data-stypeLink="item.stype_link"
					@click="handleJumpToDetail"></image>
			</block>
		</view>

		<view class="quick-enter_four"
			v-if="navs && navs.length">
			<view class="nav-item"
				v-for="item in navs"
				:key="item.id">
				<image :src="item.pic_image_url"
					mode="widthFix"
					:data-index="item.id"
					:data-stype="item.stype"
					:data-stypeLink="item.stype_link"
					@click="handleJumpToDetail"></image>
				<view class="nav_title">
					<text>{{item.title}}</text>
				</view>
			</view>
		</view>


		<view class="hospital-lists">
			<view class="hospital-lists_item"
				v-for="item in hospitalLists"
				:key="item.id"
				:data-item="item"
				@click="handleJumpToHosDetail">
				<view class="item-left">
					<image :src="item.avatar_url || '../../static/log.png'"
						mode="aspectFill"></image>
				</view>
				<view class="item-right">
					<view class="item-right_title">
						<text>{{item.name}}</text>
					</view>
					<view class="item-right_brand">
						<text>{{item.rank}}</text>
						<text>{{item.label}}</text>
					</view>
					<view class="item-right_desc">
						<text>{{item.intro}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- <g-scroll @scrolltolower="scrolltolower"
			closeRefresher
			:isLoading="isLoading"
			showNoMoreText
			:noMore="noMore"
			@handleRefresher="handleRefresher">
			<view v-for="item in 100">
				<view>{{item}}</view>
			</view>
		</g-scroll> -->

	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad
	}
	from "@dcloudio/uni-app"
	import {
		getBannerPics,
		getHospitalInfo
	}
	from '../../api/index'

	const
		sildeImages = ref([])
	const
		nav2s = ref([])
	const
		navs = ref([])
	const
		hospitalLists = ref([])
	onLoad(async (options) => {


		// 获取首页数据
		const indexData = await getBannerPics().catch(e => console.log(e))
		uni.setStorageSync('cfg', JSON.stringify(indexData.data.cfg));
		const {
			id
		} = indexData.data.area
		// 获取地区医院信息
		const hospitalData = await getHospitalInfo(id)
		sildeImages.value = hospitalData.data.slides
		nav2s.value = hospitalData.data.nav2s
		navs.value = hospitalData.data.navs
		hospitalLists.value = hospitalData.data.hospitals

	})
	const clickJump = () => {
		uni.navigateTo({
			url: "",
		})
	}
	const titleText = ref("首页")
	const showAdd = ref(true)

	const handleClose = e => {
		console.log("close");
		showAdd.value = !showAdd.value
	}



	const handleJumpToDetail = e => {
		const {
			stypelink,
			stype
		} = e.currentTarget.dataset
		// 判断是不是内部链接
		if (stype == "1") {
			console.log("ssss");
			uni.navigateTo({
				url: stypelink + '&stype=' + stype
			})
		}
	}

	const handleJumpToHosDetail = e => {
		const {
			item
		} = e.currentTarget.dataset

		console.log('item', item);
		uni.navigateTo({
			url: "/pages/hospital/index?hid=" + item.id,

		})
	}
	const count = ref(0)
	const noMore = ref(false)
	const isLoading = ref(false)
	const scrolltolower = async e => {
		console.log('scrolltolower', e);
		if (isLoading.value) return

		if (count.value >= 5) return noMore.value = true
		count.value++
		await new Promise((res, rej) => {
			isLoading.value = true
			setTimeout(function() {
				res(true)
			}, 6000)
		}).then(res => {
			isLoading.value = false
		}).finally(res => {
			isLoading.value = false
		})
	}



	const handleRefresher = async () => {
		await new Promise((res, rej) => {
			setTimeout(function() {
				res(true)
			}, 6000)
		})
		console.log("重新加载数据...");
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.index-ad {
		background: #fff9eb;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		height: 60rpx;
		;

		&_icon {
			width: 60rpx;
			color: #2a4eff;
		}

		&_text {
			flex: 1;
			font-size: 24rpx;
			color: #e0b745;
			white-space: nowrap;
			/* 超出盒子部分隐藏 */
			overflow: hidden;
			/* 文本超出的部分打点显示 */
			text-overflow: ellipsis;
		}

		&_close {
			width: 60rpx;
		}
	}

	.swiper-banner {
		padding: 20rpx 20rpx 0 20rpx;
		overflow: hidden;

		swiper-item {
			border-radius: 20rpx;
			height: 320rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.quick-enter,
	.quick-enter_four {
		display: flex;
		padding: 20rpx;
		gap: 20rpx;
		justify-content: space-between;
	}

	.quick-enter_four {
		.nav-item {
			text-align: center;

			image {
				width: 110rpx;
				height: 110rpx;
			}

			.nav_title {
				font-size: 24rpx;
				font-weight: bold;
			}
		}
	}

	.hospital-lists {
		padding: 20rpx;
		box-sizing: border-box;

		&_item {
			display: flex;
			margin: 20rpx 0;
			gap: 0 20rpx;

			.item-left {
				image {
					width: 200rpx;
					height: 200rpx;
				}
			}

			.item-right {
				&_title {
					font-weight: bold;
				}

				&_brand {
					font-weight: bold;
					color: seagreen;
					font-size: 24rpx;
					margin: 20rpx 0 10rpx;
					display: flex;
					gap: 0 20rpx;
				}

				&_desc {
					font-size: 24rpx;
					color: #ccc;
				}
			}
		}
	}
</style>